<template>
  <view class="agreement-page">

    <!-- 协议内容区域 -->
    <view class="content-container">
      <view class="content" v-if="content">
        <rich-text :nodes="content"></rich-text>
      </view>
      <view class="loading" v-else>
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import ContentApi from '@/sheep/api/member/content';

  const title = ref('');
  const content = ref('');
  const agreementId = ref(0);

  onLoad((options) => {
    agreementId.value = parseInt(options.id) || 1;
    title.value = agreementId.value === 1 ? '用户服务协议' : '隐私协议';
    loadAgreementContent();
  });

    onShow(() => {
    uni.setNavigationBarTitle({
      title: title.value
    });
  });

  // 加载协议内容
  const loadAgreementContent = async () => {
    uni.showLoading({ title: '加载中...' });
    try {
      const response = await ContentApi.get(agreementId.value);
      
      if (response.code === 0 && response.data && response.data.content) {
        content.value = response.data.content;
      } else {
        content.value = '协议内容加载中...';
      }
    } catch (error) {
      content.value = '协议内容加载中...';
    } finally {
      uni.hideLoading();
    }
  };

  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };
</script>

<style scoped>
  .agreement-page {
    min-height: 100vh;
    background: #ffffff;
  }

  .content-container {
    padding: 30rpx;
  }

  .content {
    line-height: 1.6;
    font-size: 28rpx;
    color: #333;
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    font-size: 28rpx;
    color: #999;
  }
</style>